<template>
  <li
    class="whitespace-nowrap overflow-hidden opacity-50 relative"
    :class="{ active: active }"
    flex="~ col justify-center items-center basis-12 w-12 shrink-0"
    :id="`group-${data.category_code}`"
    :key="`group-${data.category_code}`"
  >
    <n-image preview-disabled :src="data.category_icon_url" width="50%" class="justify-center" />
    <span class="w-full text-center fade-text text-3 whitespace-nowrap">
      {{ data.category_name }}
    </span>
    <span v-if="hasSelected" class="bg-primary w1 h1 rd-50% absolute top-0.8 right-2.4"></span>
  </li>
</template>

<script setup lang="ts">
import { NImage } from 'naive-ui'
import type { ModelCategory } from '@/service/types'

defineProps<{
  /** 数据 */
  data: ModelCategory
  /** 是否激活 */
  active: boolean
  /** 是否有已选择的模型 */
  hasSelected: boolean
}>()
</script>

<style scoped>
.active {
  opacity: 1;
}
</style>
